import React, {useState} from "react";
import {RootSiblingPortal} from "react-native-root-siblings";
import OverLayer from "../../components/OverLayer.tsx";
import {StyleSheet, View} from "react-native";
import {Button} from "@rn-vui/themed";
import {useThemeColors} from "../../hooks/hooks.tsx";
import {OrderColorMap} from "./OrderTypes.tsx";

const styles = StyleSheet.create({
    container: {
        rowGap: 10,
    },
    buttonItem: {},
    button: {
        paddingVertical: 22
    },
    overlayer: {
        width: 500
    }
});

interface DialogProcesserProps {

}

const DialogProcesser = (props: DialogProcesserProps, ref: any) => {
    const colors = useThemeColors();
    const [visible, setVisible] = useState<boolean>(false);
    const [buttonList, setButtonList] = useState<any[]>([]);
    const callbackRef = React.useRef<any>(null);

    const onPressButton = (dish_status: string) => {
        callbackRef.current?.(dish_status);
        setVisible(false);
    }

    React.useImperativeHandle(ref, () => ({
        open: (order: any, cb?: any) => {
            callbackRef.current = cb;
            setVisible(true);

            if (order.dish_status === 'pending') {
                setButtonList([
                    {id: 'done', title: '已做完'},
                    {id: 'holdon', title: 'Hold On'}
                ]);
            } else if (order.dish_status === 'done') {
                setButtonList([
                    {id: 'pending', title: '退回上步'},
                    {id: 'takeout', title: '已打包'}
                ]);
            } else if (order.dish_status === 'takeout') {
                setButtonList([
                    {id: 'done', title: '退回上步'}
                ]);
            } else {
                setButtonList([
                    {id: 'pending', title: '退回上步'},
                ]);
            }
        },
        close: () => {
            setVisible(false);
        }
    }));

    if (!visible) {
        return <></>
    }

    return (
        <RootSiblingPortal>
            <OverLayer overlayStyle={styles.overlayer} onBackdropPress={() => setVisible(false)}>
                <View style={styles.container}>
                    {
                        buttonList.map((btn: any) => {
                            return (
                                <Button
                                    key={btn.id}
                                    title={btn.title}
                                    containerStyle={styles.buttonItem}
                                    buttonStyle={[
                                        styles.button,
                                        {backgroundColor: OrderColorMap[btn.id]}
                                    ]}
                                    onPress={() => onPressButton(btn.id)}
                                />
                            )
                        })
                    }
                </View>
            </OverLayer>
        </RootSiblingPortal>
    );
};

export default React.forwardRef(DialogProcesser);
